<template>
  <view class="uni-numbox">
    <view
      class="uni-numbox-minus"
      @click="_calcValue('subtract')"
    >
      <text :class="minDisabled?'uni-numbox-disabled': ''" class="yticon icon--jianhao" />
    </view>
    <input
      :disabled="disabled"
      v-model="inputValue"
      class="uni-numbox-value"
      type="number"

      @blur="_onBlur"
    >
    <view
      class="uni-numbox-plus"
      @click="_calcValue('add')"
    >
      <text :class="maxDisabled?'uni-numbox-disabled': ''" class="yticon icon-jia2" />
    </view>
  </view>
</template>
<script>
export default {
  name: 'UniNumberBox',
  props: {
    isMax: {
      type: Boolean,
      default: false
    },
    isMin: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    },
    step: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: this.value,
      minDisabled: false,
      maxDisabled: false
    }
  },
  computed: {

  },
  watch: {
    inputValue(number) {
      const data = {
        number: number,
        index: this.index
      }
      this.$emit('eventChange', data)
    },
    value(number) {
      this.inputValue = number
    }
  },
  created() {
    this.maxDisabled = this.isMax
    this.minDisabled = this.isMin
  },
  methods: {
    _calcValue(type) {
      const scale = this._getDecimalScale()
      const value = this.inputValue * scale
      let newValue = 0
      const step = this.step * scale

      if (type === 'subtract') {
        newValue = value - step
        if (newValue <= this.min) {
          this.minDisabled = true
        }
        if (newValue < this.min) {
          newValue = this.min
        }
        if (newValue < this.max && this.maxDisabled === true) {
          this.maxDisabled = false
        }
      } else if (type === 'add') {
        newValue = value + step
        if (newValue >= this.max) {
          this.maxDisabled = true
        }
        if (newValue > this.max) {
          newValue = this.max
        }
        if (newValue > this.min && this.minDisabled === true) {
          this.minDisabled = false
        }
      }
      if (newValue === value) {
        return
      }
      this.inputValue = newValue / scale
    },
    _getDecimalScale() {
      let scale = 1
      // 浮点型
      if (~~this.step !== this.step) {
        scale = Math.pow(10, (this.step + '').split('.')[1].length)
      }
      return scale
    },
    _onBlur(event) {
      let value = event.detail.value
      if (!value) {
        this.inputValue = 0
        return
      }
      value = +value
      if (value > this.max) {
        value = this.max
      } else if (value < this.min) {
        value = this.min
      }

      this.inputValue = value
    }
  }
}
</script>
<style>
	.uni-numbox {
		position:absolute;
		left: 30upx;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width:230upx;
		height: 70upx;
		background:#f5f5f5;
	}

	.uni-numbox-minus,
	.uni-numbox-plus {
		margin: 0;
		background-color: #f5f5f5;
		width: 70upx;
		height: 100%;
		line-height: 70upx;
		text-align: center;
		position: relative;
	}
	.uni-numbox-minus .yticon,
	.uni-numbox-plus .yticon{
		font-size: 36upx;
		color: #555;
	}

	.uni-numbox-minus {
		border-right: none;
		border-top-left-radius: 6upx;
		border-bottom-left-radius: 6upx;
	}

	.uni-numbox-plus {
		border-left: none;
		border-top-right-radius: 6upx;
		border-bottom-right-radius: 6upx;
	}

	.uni-numbox-value {
		position: relative;
		background-color: #f5f5f5;
		width: 90upx;
		height: 50upx;
		text-align: center;
		padding: 0;
		font-size: 30upx;
	}

	.uni-numbox-disabled.yticon {
		color: #d6d6d6;
	}
</style>
